<template>
  <div class="role">
     <page-search :searchFormConfig="searchFormConfig"></page-search>
     <page-content 
     :contentTableConfig='contentTableConfig'
      pageName="role"
       @newBtnClick="handleNewData"
      @editBtnClick="handleEditData"
      ></page-content>
     <page-modal :modalConfig="modalConfig" pageName="role" ref="pageModalRef" :defaultInfo='defaultInfo' :otherInfo='otherInfo'>
       <div class="menu-tree">
         <el-tree :data="menus" :props="{cildren:'children',label:'name'}" show-checkbox @check="handleCheckChange"/>
       </div>
       
     </page-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent,computed,ref} from 'vue'
import {useStore} from 'vuex'
import PageContent from '@/components/page-content'
import PageSearch from '@/components/page-search'
import PageModal from '@/components/page-modal'
import { contentTableConfig } from './config/content.config'
import { searchFormConfig  } from './config/search.config'
import {modalConfig} from './config/modal.config'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-modal'

export default defineComponent({
  name: 'role',
  components:{
    PageContent,
    PageSearch,
    PageModal
  },
  setup() {
    const {handleNewData,handleEditData,defaultInfo,pageModalRef}=usePageModal()

    const store=useStore()
    const menus=computed(()=>store.state.entireMenu)
    
    const handleCheckChange=(data1:any,data2:any)=>{
     
       console.log(data2);
       
      const checkedKeys=data2.checkedKeys
      const halfCheckedKeys=data2.halfCheckedKeys
      
      const menuList=[...checkedKeys,...halfCheckedKeys]
      otherInfo.value={ checkedKeys }

      
      
          
    }
    const otherInfo=ref({})
    return {
      contentTableConfig,
      searchFormConfig,
      modalConfig,
      handleNewData,
      handleEditData,
      defaultInfo,
      pageModalRef,
      menus,
      otherInfo,
      handleCheckChange
    }
  }
})
</script>

<style scoped lang='less'>
.menu-tree{
  margin-left: 80px;
}
</style>
